<template>
  <el-card class="box-card">
    <div class="text item">
      <h2>视频上传</h2>
    </div>

    <el-form ref="uploadData" label-width="120px">
      <!-- 上传类型 -->

      <!-- 图片上传 -->
      <el-form-item label="上传图片">
        <el-upload class="upload-demo" action="#" :before-upload="beforeVideoUpload" :auto-upload="false" :on-change="handleFileChange" accept="video/*" list-type="picture">
          <el-button size="small" type="primary">选择文件</el-button>
        </el-upload>
      </el-form-item>

      <!-- 名字 -->
      <el-form-item label="名字">
        <el-input v-model="uploadData.name" />
      </el-form-item>

      <!-- 描述 -->
      <el-form-item label="描述">
        <el-input v-model="uploadData.description" type="textarea" />
      </el-form-item>

      <!-- 提交按钮 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
// import axios from 'axios'
import { uploadvideo } from '@/api/video'
export default {
  data() {
    return {
      uploadData: {
        description: '',
        name: '',
        video: null // 存储上传的文件
      }
    }
  },
  methods: {
    beforeVideoUpload(file) {
      const isVideo = file.type.startsWith('video/')
      if (!isVideo) {
        this.$message.error('只能上传视频文件！')
        return false
      }
      return true
    },
    handleFileChange(video, fileList) {
      this.uploadData.video = video.raw // 存储选择的文件
    },
    submitForm() {
      if (!this.uploadData.video) {
        this.$message.error('请先选择文件')
        return
      }
      const formData = new FormData()
      formData.append('video', this.uploadData.video)
      formData.append('name', this.uploadData.name)
      formData.append('description', this.uploadData.description)

      console.log('提交的表单数据', this.uploadData)
      // 代码发送请求（根据实际后端接口调整）
      uploadvideo(formData)
        .then((res) => {
          console.log(res)
        })
        .catch((error) => {
          // 请求失败，处理错误
          console.error('Error:', error)
        })
    }
  }
}
</script>

  <style scoped>
  .box-card {
    margin: 20px;
  }

  .text.item {
    text-align: center;
  }
  </style>

